<script setup>
import { onMounted,ref } from 'vue';
import { Female, Male } from '@element-plus/icons-vue'
import MenuItem from "@/components/MenuItem.vue";
import { useAdminStore } from "@/stores/AdminStore";
import router from "@/router";
import { ElMessage } from "element-plus";
import { adminPageApi, delAdminByIdApi, updateAdminApi } from "@/apis/admin";

// 管理员分页
const adminData = ref();
const adminTotal = ref();
const currentPage = ref(1);
// 是否开启按钮删除和修改
const adminDel = ref(true);
const adminUpdate = ref(true);
const adminSelect = ref();
// 修改弹窗
const adminDialog = ref(false);
// 修改管理员信息
const updateAdminInfo = ref()

// 管理员查询字段
const adminParam = ref({
  userName: "",
  userId: "",
  address: "",
  phone: "",
  gender: "",
  email: "",
});

onMounted(() => {
  adminInit();
    
})

const adminChange = async (e) => {
  currentPage.value = e;
  const res = await adminPageApi({ currentPage: e }, adminParam.value);
  adminData.value = res.data.records;
  adminTotal.value = res.data.total;
};

// 数据初始化
const adminInit = async () => {
  const adminRes = await adminPageApi();
  adminData.value = adminRes.data.records;
  adminTotal.value = adminRes.data.total;
};

const adminSearch = async () => {
  const res = await adminPageApi(null, adminParam.value);
  adminData.value = res.data.records;
  adminTotal.value = res.data.total;
};

// 管理员勾选
const adminSelectionChange = (e) => {
  adminSelect.value = e;
  if (e.length > 0) {
    // 可以进行删除和修改
    adminDel.value = false;
    if (e.length == 1) {
      adminUpdate.value = false;
    } else {
      adminUpdate.value = true;
    }
  }
  if (e.length == 0) {
    adminDel.value = true;
    adminUpdate.value = true;
  }
};

// 执行删除按钮
const adminDelBtn = async () => {
  for (let i = 0; i < adminSelect.value.length; i++) {
    const adminId = adminSelect.value[i].adminId;
    // 调用删除接口
    const res = await delAdminByIdApi({ adminId: adminId });
    ElMessage.success(res.msg);
  }
  adminDel.value = true;
  adminInit();
};

// 出现修改弹窗
const adminUpdateBtn =  () => {
  adminDialog.value = true;
  // 进行深拷贝不修改原来的gender
  updateAdminInfo.value = JSON.parse(JSON.stringify(adminSelect.value[0]));
  updateAdminInfo.value.gender = adminSelect.value[0].gender === '男' ? true : false;
};

// 执行修改按钮
const adminUpdateConfirm = async () => {
  // 调用修改接口
  updateAdminInfo.value.gender = updateAdminInfo.value.gender === true ? '男' : '女';
  updateAdminInfo.value.avatarUrl = null
  adminDialog.value = false;
  const res = await updateAdminApi(updateAdminInfo.value);
  
  if (res.code === 210) {
    ElMessage.success(res.msg);
    const adminStore = useAdminStore()
    adminStore.reset()
    router.push('/login')
    return
  }
  adminInit();
  ElMessage.success(res.msg);
}
</script>
<template>
  
      <MenuItem class="pageIndex">
        <template #search>
          <div class="search-container">
            <el-input
              v-model="adminParam.userName"
              style="width: 400px; height: 40px"
              placeholder="请输入用户名称"
              clearable
            />
            <el-input
              v-model="adminParam.userId"
              style="width: 400px; height: 40px"
              placeholder="请输入用户ID"
              clearable
            />
            <el-input
              v-model="adminParam.address"
              style="width: 400px; height: 40px"
              placeholder="请输入用户地址"
              clearable
            />
            <el-input
              v-model="adminParam.email"
              style="width: 400px; height: 40px"
              placeholder="请输入用户邮箱"
              clearable
            />
            <el-input
              v-model="adminParam.gender"
              style="width: 400px; height: 40px"
              placeholder="请输入用户性别"
              clearable
            />
            <el-input
              v-model="adminParam.phone"
              style="width: 400px; height: 40px"
              placeholder="请输入电话号码"
              clearable
            />
            <a-button
              type="primary"
              @click="adminSearch"
              style="width: 150px; height: 40px"
              >查询</a-button
            >
          </div>
        </template>
        <template #action>
          <a-button
            type="primary"
            :disabled="adminDel"
            :loading="loading"
            @click="adminDelBtn"
            style="margin: 0px 5px"
            >删除</a-button
          >
          <a-button
            type="primary"
            :disabled="adminUpdate"
            :loading="loading"
            @click="adminUpdateBtn"
            style="margin: 0px 5px"
            >修改</a-button
          >
        </template>
        <template #table>
          <el-table
            :data="adminData"
            style="width: 100%; height: 100%"
            @selection-change="adminSelectionChange"
          >
            <el-table-column type="selection" />
            <el-table-column property="avatarUrl" label="用户头像" width="150">
              <template #default="scope">
                <img
                  :src="scope.row.avatarUrl"
                  style="width: 50; height: 50px"
                />
              </template>
            </el-table-column>
            <el-table-column
              property="adminName"
              label="用户名称"
              width="200"
            />
            <el-table-column property="adminId" label="用户ID" width="250" />
            <el-table-column property="address" label="地址" width="150" />
            <el-table-column property="phone" label="电话" width="250" />
            <el-table-column property="gender" label="性别" width="200" />
            <el-table-column property="email" label="邮箱" width="250" />
            <el-table-column property="createTime" label="创建时间" />
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="adminTotal"
            :current-page="currentPage"
            @current-change="adminChange"
          />
        </template>
      </MenuItem>
      <el-dialog v-model="adminDialog" title="管理员信息" width="500" draggable>
        <el-form
          label-width="auto"
          :model="updateAdminInfo"
        >
          <el-form-item label="用户名称：">
            <el-input v-model="updateAdminInfo.adminName" />
          </el-form-item>
          <el-form-item
            label="用户地址："
          >
            <el-input v-model="updateAdminInfo.address" />
          </el-form-item>
          <el-form-item
            label="用户电话："
          >
            <el-input v-model="updateAdminInfo.phone" />
          </el-form-item>
          <el-form-item
            label="用户邮箱："
          >
            <el-input v-model="updateAdminInfo.email" />
          </el-form-item>
          <el-form-item
            label="用户性别："
          >
            <!-- <el-input v-model="updateAdminInfo.gender" /> -->
            <el-switch
              v-model="updateAdminInfo.gender"
              style="margin-left: 10px;--el-switch-on-color: rgb(102.2, 177.4, 255); --el-switch-off-color:  rgb(247, 137.4, 137.4);"
              inline-prompt
              :active-icon="Male"
              :inactive-icon="Female"
              @change = "change"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="adminDialog = false">取消</el-button>
            <el-button type="primary" @click="adminUpdateConfirm">
              修改
            </el-button>
          </div>
        </template>
      </el-dialog>
   
</template>
<style scoped>

</style>
